<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>switch-button示例</title>
    <link rel="stylesheet" href="../source/switch-button.css">
</head>
<body>

<div class="switch-btn">
    <input type="checkbox" name="switch" id="switch">
    <label for="switch"></label>
</div>

<div class="switch-btn switch-primary">
    <input type="checkbox" name="switch" id="test">
    <label></label>
</div>

<div class="switch-btn switch-success">
    <input type="checkbox" name="switch">
    <label></label>
</div>

<div class="switch-btn switch-danger">
    <input type="checkbox" name="switch">
<label></label>
</div>

<div class="switch-btn switch-warning">
    <input type="checkbox" name="switch">
    <label></label>
</div>

<div class="switch-btn switch-info">
    <input type="checkbox" name="switch" disabled id="dis">
    <label></label>
</div>

<!--slide line-->


<div class="switch-slide switch-success">
    <input type="checkbox" name="switch">
    <label for="switch"></label>
</div>
<div class="switch-slide switch-danger">
    <input type="checkbox" name="switch">
    <label for="switch"></label>
</div>
<div class="switch-slide switch-primary">
    <input type="checkbox" name="switch">
    <label for="switch"></label>
</div>
<div class="switch-slide switch-info">
    <input type="checkbox" name="switch">
    <label for="switch"></label>
</div>
<div class="switch-slide switch-warning">
    <input type="checkbox" name="switch">
    <label for="switch"></label>
</div>


<script src="../source/switch-button.js"></script>
<script>

//    var sb = document.querySelectorAll('.switch-btn');
//    switchBtn({
//        elements: sb,
//        on: function () {
//            console.log(this, 'on');
//            return true;
//        },
//        off: function () {
//            console.log(this, 'off');
//            return true;
//        },
//        changed: function () {
//            console.log(this, 'changed');
//            return true;
//        }
//    });
</script>
</body>
</html>